import React, {useEffect, useState} from 'react';
import axios from "axios";
import {Button, Table, Tag, Modal, Popover, Switch} from "antd";
import {DeleteOutlined, EditOutlined,ExclamationCircleOutlined} from "@ant-design/icons";

const {confirm} = Modal

const RightList = () => {

    const [dataSource,setdataSource]=useState([])
    useEffect(()=>{
        axios.get('/rights?_embed=children').then(res=>{
            const list = res.data
            list.forEach(item=>{
                if(item.children.length===0)item.children=''
            })
            setdataSource(res.data)
        })
    },[])
    const columns = [
        {
            title:'ID',
            dataIndex:'id',
            render:(id)=>{
                return <b>{id}</b>
            }
        },
        {
            title: '权限名称',
            dataIndex: 'title'
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render:(key)=>{
                return <Tag color={"green"}>{key}</Tag>
            }
        },
        {
            title: '操作',
            render:(item)=>{
                return <div>
                    <Popover content={<div style={{textAlign:'center'}}>
                        <Switch checked={item.pagepermisson} onChange={()=>switchMethod(item)}></Switch>
                    </div>} title="配置" trigger={item.pagepermisson===undefined?'':'click'}>
                        <Button shape='circle' type={"primary"} icon={<EditOutlined/>} disabled={item.pagepermisson===undefined} style={{marginRight:'5px'}}/>
                    </Popover>
                    <Button shape="circle" danger icon={<DeleteOutlined/>}
                            onClick={()=>{confirmDel(item)}}/>
                </div>
            }
        }
    ]
    function confirmDel(item) {
        confirm({
            title: '确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(item);
            },
            onCancel() {
                console.log('取消');
            },
        });
    }

    const switchMethod =(item)=>{
        item.pagepermisson=item.pagepermisson===1?0:1
        setdataSource([...dataSource])
        if(item.grade===1){
            axios.patch(`/rights/${item.id}`,{
                pagepermisson:item.pagepermisson
            })
        }else {
            axios.patch(`/children/${item.id}`,{
                pagepermisson:item.pagepermisson
            })
        }
    }

    const deleteMethod = (item) =>{
        if(item.grade===1){
            setdataSource(dataSource.filter(data=>data.id!==item.id))
        }else {
            let list = dataSource.filter(data=>data.id===item.rightId)
            list[0].children = list[0].children.filter(data=>data.id!==item.id)
            setdataSource([...dataSource])
        }
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{pageSize:10}}/>
        </div>
    );
};

export default RightList;